function appear() {
    if (num > 20) {
      for (var i = 0; i < 20; i++) {
        id++;
        $('.works').append('<div class="col-md-3"><div class="thumbnail"  onclick="jump("' + id + '");" id="' + id + '"><img alt="300x200" src="钢炼.jpg" class="workOne" /> <div class="caption"><p>作品名</p><div class="zanTime"><span><p class="zan">&#10084;</p><p class="zanShu">100</p></span><span>time</span></div> </div></div> </div>');
        // var path = '${base.contextPath}/resources/images/'+areaCode.replace("#","")+".png";
        // var path = '钢炼.jpg'
        // $(".workOne").css("background-image", "url(" + path + ")").css(" background-repeat", "no-repeat").css('background-size', '100% 100%');
      }
    }
    else {
      for (var j = 0; j < num; j++) {
        id++;
        $('.works').append('<div class="col-md-3"><div class="thumbnail"  onclick="jump("' + id + '");" id="' + id + '"><img alt="300x200" src="钢炼.jpg" class="workOne" /> <div class="caption"><p>作品名</p><div class="zanTime"><span><p class="zan">&#10084;</p><p class="zanShu">100</p></span><span>time</span></div> </div></div> </div>');                  // // var path = '${base.contextPath}/resources/images/'+areaCode.replace("#","")+".png";
        // var path = '钢炼.jpg'
        // $(".workOne").css("background-image", "url(" + path + ")").css(" background-repeat", "no-repeat").css('background-size', '100% 100%');
      }
    }
  }